import { memo } from "react";
import { ProductType } from "../../types/product";
import ProductItemStyle from "./style";
import { PRICE_ICON } from "../../constant";
import { LocationFill } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { Image } from "antd-mobile";
import { routeItmeType } from "../../router";

interface IProps {
  data: ProductType;
  orgsData: { id: string; name: string; address: string }[];
}

const ProductItem = memo((props: IProps) => {
  const { data, orgsData } = props;
  const nav = useNavigate();

  return (
    <ProductItemStyle>
      <div
        className="wrapper"
        onClick={(event) => {
          nav(`/${routeItmeType.PRODUCT_DETAIL}/${data.id}`);
          event.stopPropagation();
        }}
      >
        <div className="cover">
          <Image src={data.cover} alt="封面加载错误" fit="cover" />
        </div>
        <div className="content">
          <div className="title">{data.name}</div>
          <div className="details">
            <div
              className="org"
              onClick={(event) => {
                nav(`/${routeItmeType.ORG_DETAIL}/${data.orgId}`);
                event.stopPropagation();
              }}
            >
              {orgsData?.find((item) => item.id === data?.orgId)?.name}
            </div>
            <div className="price">
              <div className="nowP">{PRICE_ICON + data.preferentialPrice}</div>
              <div className="originP">{data.originPrice}</div>
            </div>
          </div>
          <div className="location">
            <LocationFill color="#a8a5a5" />
            {orgsData?.find((item) => item.id === data?.orgId)?.address}
          </div>
        </div>
      </div>
    </ProductItemStyle>
  );
});

export default ProductItem;
